<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //常量路由:全部用户都可以访问到的路由
    let constRoute = [
        {
            //登录
            path: '/login',
            component: () => import('@/views/login/index.vue'),
            name: 'login',
            meta: {
                title: '登录',//菜单标题
                hidden: true,//代表路由标题在菜单中是否隐藏  true:隐藏 false:不隐藏
                icon: "Promotion",//菜单文字左侧的图标,支持element-plus全部图标
            }
        }
        ,
        {
            //登录成功以后展示数据的路由
            path: '/',
            component: () => import('@/layout/index.vue'),
            name: 'layout',
            meta: {
                title: '',
                hidden: false,
                icon: ''
            },
            redirect: '/home',
            children: [
                {
                    path: '/home',
                    component: () => import('@/views/home/index.vue'),
                    meta: {
                        title: '首页',
                        hidden: false,
                        icon: 'HomeFilled'
                    }
                }
            ]
        },
        {
            //404
            path: '/404',
            component: () => import('@/views/404/index.vue'),
            name: '404',
            meta: {
                title: '404',
                hidden: true,
                icon: 'DocumentDelete'
            }
        },
        {
            path: '/screen',
            component: () => import('@/views/screen/index.vue'),
            name: 'Screen',
            meta: {
                hidden: false,
                title: '数据大屏',
                icon: 'Platform'
            }
        }
    ]

    //异步路由:用户的的人有这个路由,有的人没有[动态追加异步路由]
    let asnycRoute = [
        {
            path: '/acl',
            component: () => import('@/layout/index.vue'),
            name: 'Acl',
            meta: {
                title: '权限管理',
                icon: 'Lock'
            },
            redirect: '/acl/user',
            children: [
                {
                    path: '/acl/user',
                    component: () => import('@/views/acl/user/index.vue'),
                    name: 'User',
                    meta: {
                        title: '用户管理',
                        icon: 'User'
                    }
                },
                {
                    path: '/acl/role',
                    component: () => import('@/views/acl/role/index.vue'),
                    name: 'Role',
                    meta: {
                        title: '角色管理',
                        icon: 'UserFilled'
                    }
                },
                {
                    path: '/acl/permission',
                    component: () => import('@/views/acl/permission/index.vue'),
                    name: 'Permission',
                    meta: {
                        title: '菜单管理',
                        icon: 'Monitor'
                    }
                }
            ]
        }
        ,
        {
            path: '/product',
            component: () => import('@/layout/index.vue'),
            name: 'Product',
            meta: {
                title: '商品管理',
                icon: 'Goods',
            },
            redirect: '/product/trademark',
            children: [
                {
                    path: '/product/trademark',
                    component: () => import('@/views/product/trademark/index.vue'),
                    name: "Trademark",
                    meta: {
                        title: '品牌管理',
                        icon: 'ShoppingCartFull',
                    }
                },
                {
                    path: '/product/attr',
                    component: () => import('@/views/product/attr/index.vue'),
                    name: "Attr",
                    meta: {
                        title: '属性管理',
                        icon: 'ChromeFilled',
                    }
                },
                {
                    path: '/product/spu',
                    component: () => import('@/views/product/spu/index.vue'),
                    name: "Spu",
                    meta: {
                        title: 'SPU管理',
                        icon: 'Calendar',
                    }
                },
                {
                    path: '/product/sku',
                    component: () => import('@/views/product/sku/index.vue'),
                    name: "Sku",
                    meta: {
                        title: 'SKU管理',
                        icon: 'Orange',
                    }
                },
            ]
        }
    ]

    //任意路由
    let anyRoute = {
        //任意路由
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
        meta: {
            title: '任意路由',
            hidden: true,
            icon: 'DataLine'
        }
    }


    //硅谷333: routes['Product','Trademark','Sku']
    let guigu333 = ['Product', 'Trademark', 'Sku'];
    function filterAsyncRoute(asnycRoute, routes) {
        return asnycRoute.filter(item => {
            if (routes.includes(item.name)) {
                if (item.children && item.children.length > 0) {
                    item.children = filterAsyncRoute(item.children, routes)
                }
                return true
            }
        })
    }
    //硅谷333需要展示的异步路由
    let guigu333Result = filterAsyncRoute(asnycRoute, guigu333);
    console.log([...constRoute, ...guigu333Result, anyRoute], '硅谷333');


    //第二个登录:对比的全部异步路由发生变化
    let guigu444 = ['Product', 'Spu'];
    console.log(asnycRoute);

</script>